<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 400px;
            line-height: 30px;
            margin: 50px auto;
            border-collapse: collapse;
        }

        td {
            border: 1px solid #ccc;
            padding: 10px
        }
    </style>
</head>
<body>

    <table>
        <thead>
            <tr>
                <td><input type="checkbox"></td>
                <td>苹果</td>
                <td>100</td>
                <td><button>添加</button></td>
            </tr>
        </thead>

        <tbody id="tbody">

        </tbody>

        <script>
            //需求：点击添加按钮，复制当前行，并追加tbody，再将添加改为删除

            let btn=document.querySelector('table tr:first-child button')

            btn.addEventListener('click',function(){
                //克隆tr
                let tr=this.closest('tr').cloneNode(true)
                //在tbody中添加tr
                tbody.append(tr)
                //添加改为删除
                tr.querySelector('button').textContent='删除'
            })

            //点击删除按钮，删除当前行
            tbody.addEventListener('click',function(e){
                if(e.target.nodeName==='BUTTON'){
                    //删除当前行
                   e.target.closest('tr').remove()
                }
            })
        </script>
    
</body>
</html>